<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动评论</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="comments-container">
      <div class="comments" id="comments">
        <div class="comment">这是评论1。</div>
        <div class="comment">这是评论2。</div>
        <div class="comment">这是评论3。</div>
        <div class="comment">这是评论4。</div>
        <div class="comment">这是评论5。</div>
        <!-- 添加更多评论 -->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
<script>
  // script.js
  window.onload = function () {
    const commentsContainer = document.getElementById('comments');
    const comments = commentsContainer.children;
    const commentsHeight = comments[0].offsetHeight;
    let totalHeight = comments[0].offsetHeight * comments.length;

    commentsContainer.style.height = totalHeight + 'px';

    const scrollComments = () => {
      let top = parseInt(commentsContainer.style.top || '0');
      top -= commentsHeight / 30; // 控制滚动速度
      if (Math.abs(top) >= totalHeight) {
        top = 0;
      }
      commentsContainer.style.top = top + 'px';
    };

    setInterval(scrollComments, 100);
  };
</script>
<style>
  /* styles.css */
  body {
    font-family: Arial, sans-serif;
  }

  .comments-container {
    width: 400px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    margin: 0 auto;
  }

  .comments {
    position: relative;
    animation: scroll 10s linear infinite;
  }

  .comment {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  @keyframes scroll {
    0% {
      top: 0;
    }
    100% {
      top: -100%;
    }
  }
</style>
